// base
import Taro, { Component } from '@tarojs/taro'
import { View, Text, Image } from '@tarojs/components'
import { AtActionSheet, AtActionSheetItem } from 'taro-ui'
// redux
import { connect } from '@tarojs/redux'
import { DOREQUESTNEWJOBINTENTION } from './store/actions/pagenewjobintention'
import { UPDATEPAGENEWJOBINTENTION } from './store/types/pagenewjobintention'
// less
import './index.less'
import BtmFixedBtn from '../../components/page-components/btm-fixed-btn'
import IntentionCard from '../../components/page-components/intention-card'
import { navigateTo } from '../../crossplatform/apiservice/navigate'
import pagejumplist from '../../configuration/pagejumplist.json'
import If from '../../components/page-components/if'
import { updateJobStatus } from '../../service/user-archive-controller'
import { UPDATELANDMARK } from '../../store/types/landmark'
import { showToast } from '../../crossplatform/apiservice/toast/index'
import tool from '../../util/tool'

const mapActiontoProps = dispatch => ({
  updateState(payload) {
    dispatch({
      type: UPDATEPAGENEWJOBINTENTION,
      payload: {
        ...payload
      }
    })
  },
  updateLandmark(payload) {
    dispatch({
      type: UPDATELANDMARK,
      payload: {
        ...payload
      }
    })
  },
  dorequest(payload) {
    return new Promise(resolve => {
      let promise = DOREQUESTNEWJOBINTENTION(payload)
      dispatch(promise)
    })
  }
})

@connect(
  ({ pagenewjobintention, userinfo, pageselfcenter, landmark }) => ({
    ...pagenewjobintention,
    landmarkName: landmark.landmarkName,
    cityId: landmark.cityId,
    jobStatus: pageselfcenter.jobStatus,
    userinfos: userinfo,
    userId: userinfo.userId
  }),
  mapActiontoProps
)
class NewJobIntention extends Component {
  config = {
    navigationBarTitleText: '求职意向'
  }

  constructor(props) {
    super(props)
    this.state = {
      jobStatusList: [{ name: '寻找工作', code: 1 }, { name: '考虑机会', code: 2 }],
      jobStatus: props.jobStatus,
      isOpened: false
    }
    this.landmarkName = props.landmarkName
    this.cityId = props.cityId
  }

  componentWillMount() {
    // onLoad
  }

  componentDidMount() {
    // onready
  }

  componentDidShow() {
    // onshow
    const { userId } = this.props
    this.props.dorequest({ userId })
  }

  componentDidHide() {
    // onhide
  }

  componentWillUnmount() {
    // onUnload
    // this.props.updateLandmark({
    //   landmarkName: this.landmarkName,
    //   cityId: this.cityId
    // })
  }

  tapJobIntention = () => {
    const { isOpened } = this.state
    this.setState({
      isOpened: !isOpened
    })
  }

  sheetClose = () => {
    this.setState({
      isOpened: false
    })
  }

  handleClick = item => {
    // 点击求职状态
    this.setState({
      isOpened: false
    })

    const { userId, userArchiveModel } = this.props
    updateJobStatus({
      archiveId: userArchiveModel.id,
      jobStatus: item.code,
      userId: parseInt(userId)
    }).then(({ data }) => {
      const { status, message } = data
      if (status) {
        this.setState({
          jobStatus: item.name
        })
      } else {
        showToast({
          title: message || '更新求职状态失败'
        })
      }
    })
  }

  jumpTo = tool.throttle((type, wantWorkId, index) => {
    // 跳转到编写求职意向页面 0: 新增  1:编辑
    navigateTo({
      url: `${pagejumplist['edit-job-intention'].path}?isEdit=${type}&wantWorkId=${wantWorkId}&workIndex=${index}`
    })
  })

  render() {
    const { isOpened, jobStatusList, jobStatus } = this.state
    const { wantWork = [] } = this.props
    return (
      <View className="NewJobIntention_id52882">
        <View className="title">管理求职意向</View>
        <View className="list-item" onClick={this.tapJobIntention}>
          <View className="item-title">求职状态</View>
          <View className="item-desc">
            <Text>{jobStatus}</Text>
            <Image
              className="item-arrow"
              src="https://imagesize.hrwork.com/sp/files/8db9c17d-2da7-4a9e-a44c-98a32670fcc7.png"
            />
          </View>
        </View>
        <View className="intention">
          <If visible={!(wantWork.length > 0)}>
            <View className="intention-nothing">
              <Image
                className="intention-nothing-img"
                src="https://imagesize.hrwork.com/sp/files/8a179b81-2d61-4f6f-a6ef-1914e22a5101.png"
              />
              <Text className="intention-noting-des-top">无求职意向</Text>
              <Text className="intention-noting-des-bottom">添加求职意向岗位匹配更精准哦～</Text>
            </View>
          </If>
          <If visible={wantWork.length > 0}>
            <View className="intention-title">求职意向</View>
            <View className="intention-card">
              {wantWork.map((item, index) => {
                let comprehensive = JSON.parse(item.comprehensive)
                let workNature = comprehensive.workNature[0]
                let workPlace = comprehensive.workPlace || []
                let wantWorkId = item.id
                let jobPlace = item.jobPlace
                return (
                  <IntentionCard
                  workNature={workNature}
                  workPlace={workPlace}
                  comprehensive={comprehensive}
                  wantWorkId={wantWorkId}
                  index={index}
                  jobPlace={jobPlace}
                  onTap={this.jumpTo}
                  />
                )
              })}
            </View>
          </If>
        </View>

        <If visible={!(wantWork.length > 2)}>
          <BtmFixedBtn text="添加求职意向" onTap={this.jumpTo.bind(this, 0)} />
        </If>

        <AtActionSheet
          isOpened={isOpened}
          cancelText="取消"
          title="求职状态"
          onClose={this.sheetClose}
        >
          {jobStatusList.map((item, index) => {
            return (
              <AtActionSheetItem key={index} onClick={this.handleClick.bind(this, item)}>
                {item.name}
              </AtActionSheetItem>
            )
          })}
        </AtActionSheet>
      </View>
    )
  }
}

export default NewJobIntention
